<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding-bottom: 800px;
            padding-left: 30px;
        }
        .box{
            width: 150px;
            height: 220px;
            border: 1px solid black;
            object-fit: cover;
        }
    </style>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="film in films" :key="film.id">
                <!-- <img :src="film.filmImg" v-preload> -->
                <img class="box" src="../assets/img/loading.gif" v-preload="film.filmImg">
            </li>
        </ul>
        <input type="button" value="loadFilm" @click="loadFilms()">
    </div>
    <script type="module">
        import axios from "../assets/axios-es/axios.js"
        // 加载 Vue3 的ESM 模块文件
        import { createApp } from "../assets/vue3/vue.esm-browser.js"
        createApp({
            data() {
                return {
                    films: []
                }
            },
            methods: {
                async loadFilms() {
                    let { data } = await axios.get("http://localhost:3000/films", {
                        params: {
                            _page: 1,
                            _limit: 4
                        }
                    })
                    this.films = data;
                }
            },
            // 自定义属性 directives 描述扩展指令
            directives: {
                preload: function (el, binding) {
                    // console.log("preload:",el,binding)
                    let imgSrc = binding.value;
                    let cusStyle = el.style.cssText;
                    el.style.cssText = cusStyle + "object-fit: scale-down;object-position: center;background-color: #dedede;";
                    let tempImg = new Image();
                    tempImg.src = imgSrc
                    tempImg.onload = function () {
                        el.src = imgSrc;
                        el.style.cssText = cusStyle;
                    }
                    tempImg.onerror = function(){
                        el.src = "../assets/img/notfoud.png";
                    }
                }
            },
            created() {
                // this.loadFilms();
            },
        }).mount("#app")
    </script>
</body>

</html>